<template>
    <div class="write">
        <div class="head f12">
            <span>已选择投诉类型:</span>
            <span>{{ title }}</span>
        </div>
        <div class="content">
            <div class="select">
                <div class="left">
                    <stars-stars></stars-stars>
                    <span class="title f14">请选择类别</span>
                </div>
                <span class="how f12">【如何获取？】</span>
            </div>
            <div class="option">
                <span class="item f12" v-for="(item, index) in option" :class="{ active: active == index }"
                    @click="changeIndex(index)">{{ item }}</span>
            </div>
            <div class="enter-value">
                <span class="cuurent-length f12">
                    {{ classifyLength }}/25
                </span>
                <input type="text" class="classify f12" v-model="classify" maxlength="25" :placeholder="placeholder">
            </div>
            <div class="explain">
                <stars-stars></stars-stars>
                <span class="title f14">详细说明</span>
            </div>
            <div class="explain-value">
                <textarea class="explain-content f12" placeholder="请输入详细情况说明" v-model="explain"
                    maxlength="500"></textarea>
                <span class="cuurent-length f12">
                    {{ explainLength }}/500
                </span>
            </div>
            <van-uploader class="upload" v-model="fileList" multiple :max-count="5" />
            <div class="submit">
                提交
            </div>
        </div>
    </div>
</template>
<script>
import { Uploader } from "vant";
import proposalList from "@/common/proposalList"
import StarsStars from "@/components/StarsStars.vue"
export default {
    name: "ProposalWrite",
    components: {
        StarsStars,
        [Uploader.name]: Uploader,
    },
    data() {
        return {
            option: ["商品名称", "商家名称", "订单编号"],
            title: "",
            active: 0,
            classify: "",
            explain: "",
            classifyLength: 0,
            explainLength: 0,
            placeholder: "请填写投诉的商品名称",
            fileList: [],
        }
    },
    watch: {
        classify(value) {
            this.classifyLength = value.length;
        },
        explain(value) {
            this.explainLength = value.length;
        },
    },
    methods: {
        changeIndex(index) {
            this.active = index;
            const defaultTitle = "请填写投诉的";
            this.placeholder = defaultTitle + this.option[index];
        }
    },
    mounted() {
        const { path } = this.$route.query;
        this.title = proposalList[path];
    }
}
</script>
<style lang="scss" scoped>
::-webkit-scrollbar {
    display: none;
}

.element {
    overflow: -moz-scrollbars-none;
}

::v-deep .van-uploader__preview-image {
    width: 20vw;
}

.write {
    .head {
        display: flex;
        background-color: #f6f6f6;
        width: 375px;
        padding: 15px;

        span:nth-of-type(1) {
            margin-right: 5px;
        }

    }

    .content {
        padding: 15px;

        .select {
            display: flex;
            align-items: flex-end;
            margin-bottom: 15px;

            .left {
                display: flex;
                align-items: center;
            }

            .how {
                color: #d46b68;
            }
        }

        .option {
            display: flex;
            justify-content: space-between;

            .item {
                width: 29%;
                display: inline-block;
                color: #cccccc;
                border: 1px solid #cccccc;
                height: 33px;
                line-height: 33px;
                text-align: center;
                border-radius: 6px;

                &.active {
                    color: white;
                    border: 1px solid #f62221;
                    background-color: #f62221;
                }
            }
        }

        .enter-value {
            position: relative;
            margin: 20px 0;

            .cuurent-length {
                position: absolute;
                top: 50%;
                color: #cccccc;
                right: 10px;
                transform: translateY(-50%);
            }

            .classify {
                width: 100%;
                border: 0;
                outline: 0;
                height: 40px;
                padding: 10px;
                padding-right: 50px;
                color: #cccccc;
                border-radius: 4px;
                background-color: #f6f6f6;

                &::placeholder {
                    font-size: 12px;
                }
            }
        }

        .explain {
            display: flex;
            align-items: center;
        }

        .explain-value {
            margin: 20px 0;
            position: relative;
            height: 150px;
            background-color: #f6f6f6;
            border-radius: 4px;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            align-items: flex-end;

            .explain-content {
                width: 100%;
                height: 125px;
                border: 0;
                outline: 0;
                color: #cccccc;
                padding: 10px;
                background-color: #f6f6f6;

                &::placeholder {
                    font-size: 12px;
                }
            }

            .cuurent-length {
                color: #cccccc;
                margin-right: 10px;
            }
        }

        .submit {
            margin-top: 20px;
            width: 100%;
            border-radius: 20px;
            height: 40px;
            line-height: 40px;
            color: white;
            text-align: center;
            background-color: #f62221;
        }
    }
}
</style>